<template>
  <el-dialog :title="$t('label_returnGoodSku_handle')" :visible.sync="visible" :close-on-click-modal="false" custom-class="dialog_auto">
    <div class="center" v-loading="loading">
      <el-form :model="formData" ref="formEl" :rules="formRules">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content">{{ $t('label_return_type') }}：{{ $enumShow(formData.returnType,
              'ReturnRetTypeEnum') }}</div>
          </el-col>
          <el-col v-show="returnType === 'PLATFORM'" :span="8">
            <div class="grid-content">{{ $t('label_platform') }}： {{ formData.platformName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">{{ $t('label_customer_track_code') }}：{{ formData.customerTrackingNumber }}</div>
          </el-col>
          <el-col v-show="returnType === 'PLATFORM'" :span="8">
            <div class="grid-content">{{ $t('label_platform_track_code') }}：{{ formData.trackingNumber }}</div>
          </el-col>

          <el-col :span="8">
            <div class="grid-content">{{ $t('label_ec_platform_code') }}：{{ formData.ecommerceOrderNo }}</div>
          </el-col>

          <el-col :span="8">
            <div class="grid-content">{{ $t('label_returnGood_warehouse') }}：{{ formData.warehouseName }}</div>
          </el-col>
          <el-col :span="24">
            <div class="flex_row_center grid-content">
              <span>{{ $t('label_platform_photo') }}：</span>
              <div class="image__preview">
                <ex_image_view lazy fit="fill" v-for="(item, index) in formData.attachedList"
                  :src="item.filePath" :key="index" style="width: 100px; height: 100px"
                  :preview-src-list="formData.attachedList.map(it => it.filePath)" />
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('label_is_unpack') + '：'">
              <ex_super_input type="radio-group" :disabled="formData.changeNeedUnpacking !=='Y'" v-model="formData.needUnpacking" enum="YesOrNoEnum" />
              <span v-if="formData.changeNeedUnpacking !=='Y'" style="color:chocolate">{{ $t('label_is_unpack_tip') }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="formData.needUnpacking === 'Y'">
            <el-form-item :label="$t('label_unpack_inspection') + '：'" prop="inspectType">
              <el-checkbox-group v-model="formData.inspectType">
                <el-checkbox label="VIDEO">{{ $t('label_video') }}</el-checkbox>
                <el-checkbox label="IMAGE">{{ $t('label_photo') }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-alert :title="$t('tip_returnGoodSku_handle')" type="info" :closable="false">
        </el-alert>

        <div class="dialogTable">
          <ex_super_table ref="superTable" v-bind="skuTableOption" :data="formData.itemParams" :height='300'
            @expand-change="handleExpandChange" :default-expand-all="true">
            <template v-slot:expandHandle="{ row }">
              <span v-if="!row.attachedList || row.attachedList.length === 0">—</span>
              <span v-else class="expandText" @click="toogleExpand(row)">
                {{ row.isExpend||row.isExpend!=='' ? $t('label_retract') : $t('label_view') }}
              </span>
            </template>
            <template v-slot:expand="{ row }">
              <div class="image__preview" style="margin-left: 50px;padding: 10px 0;" v-if="row.attachedList && row.attachedList.length != 0">
                <ex_image_view v-for="(item, index) in row.attachedList" :key="index"
                  style="width: 100px; height: 100px" :src="item.filePath" lazy fit="fill"
                  :preview-src-list="row.attachedList.map(it => it.filePath)" />
              </div>
              <div v-else></div>
            </template>
          </ex_super_table>
        </div>
      </el-form>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">{{ $t('label_confirm') }}</el-button>
      <el-button @click="resetForm">{{ $t('label_cancel') }}</el-button>
    </span>

    <!-- 用来点击按钮显示图片 在页面上隐藏 -->

  </el-dialog>
</template>
<script>

import superTablePageFunction from '@/mixin/super-table-page-function';
export default {
  title: 'label_returnGoodSku_handle',
  mixins: [superTablePageFunction,],
  route_manual: true,
  components: {},
  data() {
    return {
      loading: false,
      showView: false,
      emitKey: '',
      visible: false,
      returnType: '',
      returnProcessMethodList: [],
      formRules: {
        inspectType: { type: 'array', message: this.$t('tip_least_one_select'), required: true, },
        skuId: { message: this.$t('tip_can_no_empty'), required: true, },
        stockKind: { message: this.$t('tip_can_no_empty'), required: true, },
        returnHandlingMethod: [{ trigger: 'change', message: this.$t('tip_can_no_empty'), required: true, }]
      },
      maxHeight: 0,
      skuTableOption: {
        index: false,
        model: [
          { type: 'expand', slot: 'expand', fixed: 'right', 'width': 1, 'show-overflow-tooltip': true, },
          { key: 'skuName', label: 'label_sku_name', 'min-width': 120, 'show-overflow-tooltip': true, },
          { key: 'skuBarcode', label: 'label_sku_code', 'min-width': 130, 'show-overflow-tooltip': true, },
          { key: 'skuOnlyCode', label: 'label_sku_code_cn', 'width': 150, 'show-overflow-tooltip': true, },
          { key: 'skuCode', label: 'label_custom_code', 'width': 150, 'show-overflow-tooltip': true, },
          { key: 'returnSkuCodeList', label: 'label_return_order_sku_code', 'width': 150, 'show-overflow-tooltip': true,formatter: (r, c, v) => v?v.join(','):'' },
          { key: 'isAbnormal', label: 'label_is_abnormal', 'width': 100, 'show-overflow-tooltip': true, formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { slot: 'expandHandle', label: 'label_sku_photo', 'show-overflow-tooltip': true, },
          {
            key: 'returnHandlingMethod', label: 'label_do_with_method',
            'min-width': 140,
            renderHeader: (h, { column, $index }) => {
              return (
                <span class="table-require">{column.label}</span>
              )
            },
            render: (h, { column, row, index }) => {

              return <el-form-item
                prop={`itemParams.${index}.returnHandlingMethod`}
                rules={this.formRules.returnHandlingMethod}
              >
                <ex_select_auto
                  placeholder={this.$t('tip_please_select')}
                  enum="SkuReturnMethodEnum"
                  value={row.returnHandlingMethod}
                  onInput={value => {
                    this.$set(row, 'returnHandlingMethod', value)
                  }}
                >
                </ex_select_auto>
              </el-form-item>
            }
          },
          {
            key: 'skuId', label: 'label_associated_sku', 'min-width': 180,
            renderHeader: (h, { column, $index }) => (<span class="table-require">{column.label}</span>),
            render: (h, { column, row, index }) => {
              if (!row.notSkuId) {
                return '—'
              }
              return (
                <el-form-item
                  prop={`itemParams.${index}.skuId`}
                  rules={this.formRules.skuId}
                >
                  <sku_selec_input
                    value={row.skuId}
                    customerId={row.customerId}
                    onChangeItem={value => {
                      this.$set(row, 'skuId', value.id)
                      this.$set(row, 'associatedCommodityCode', value.skuOnlyCode)
                    }}
                  />
                </el-form-item>
              )
            }
          },
        ]
      },
      formData: {
        needUnpacking: 'N',
        inspectType: [],
        itemParams: []
      },
    };
  },
  computed: {
    isPLATFORM() {
      return this.returnType === 'PLATFORM'
    },
    isIntactGoodsShow() {
      return this.isPLATFORM && this.formData.itemParams && this.formData.itemParams.some(it => it.org_isIntactGoods == "Y")
    },
  },
  mounted() {
    this.maxHeight = document.body.clientHeight - 400
  },
  methods: {
    show({ row, emitKey, returnProcessMethodList }) {
      this.formData = {
        needUnpacking: 'N',
        inspectType: [],
        itemParams: []
      }
      this.emitKey = emitKey
      this.returnType = row.returnType

      this.returnProcessMethodList = []

      this.loading = true
      this.$ajax({
        url: this.$url['oms/ReturnOrderDetail'],
        method: 'post',
        data: { id: row.id },
        success: (res) => {
          Object.assign(this.formData, res.data)
          this.formData.itemParams = JSON.parse(JSON.stringify(res.data.detailList))
          if(this.formData.customerId===-1){
            this.formData.customerId=''
          }
          this.formData.itemParams.forEach(item=>{
            if(item.customerId===-1){
              item.customerId=''
            }
            if(item.skuId+''==='-1'){
              item.skuId = ''
              item.notSkuId = true
            }
            // 如果没有默认处理方式 则默认上架
            if(!item.returnHandlingMethod){
              this.$set(item,'returnHandlingMethod','PUT_SHELF')
            }
          })
        },
        complete: () => {
          this.loading = false
        }
      })
      this.visible = true
    },
    submit() {
      this.$refs.formEl.validate((valid, obj) => {
        console.log(this.formData, obj)
        if (valid) {
          this.loading = true
          this.$ajax({
            url: this.$url['oms/ReturnOrderHandleSubmit'],
            method: 'post',
            type: 'json',
            loading: true,
            data: {
              id: this.formData.id,
              needUnpacking: this.formData.needUnpacking,
              inspectType: this.formData.inspectType,
              itemParams: this.formData.itemParams
            },
            success: (res) => {
              this.$message.success(this.$t('tip_submit_success'))
              this.$emit("success", true)
              this.visible = false
            },
            complete: () => {
              this.loading = false
            }
          })
        } else {
          this.$message.error(this.$t('form_validate_error'))
          return false;
        }
      });

    },
    resetForm() {
      this.visible = false
      this.$refs.formEl.resetFields()
    },
    handleExpandChange(row, rows) {
      // 判断当前行展开状态
      const isExpend = rows.some(r => r.id === row.id)
      if (isExpend) {
        row.isExpend = true
      } else {
        row.isExpend = false
      }
    },
    toogleExpand(row) {
      this.$refs.superTable.toggleRowExpansion(row)
    },
    previewPic() {
      this.$refs.previewImg.$refs.img.showViewer = true
    }
  }
};

</script>
<style lang="less" scoped>
.dialogTable {
  margin: 16px 0;
}

.grid-content {
  padding: 10px 0;
}

.expandText {
  color: #409EFF;
  cursor: pointer;
}

/deep/ .el-table__expand-icon {
  display: none;
}
/deep/ .el-table__expanded-cell{
  padding: 0;
}
</style>
